<template>
  <div class="zhengti3">
    <div class="login-container">
      <div class="right-panel">
        <el-card class="register-card">
          <div class="register-form">
            <!-- 邮箱输入 -->
            <el-input
              v-model="email"
              placeholder="请输入注册邮箱"
              :disabled="countdown > 0"
            >
              <template #prefix>
                <el-icon><Message /></el-icon>
              </template>
            </el-input>

            <!-- 验证码输入 -->
            <div class="input-group">
              <el-input
                v-model="verifyCode"
                placeholder="请输入验证码"
                :disabled="countdown > 0"
              >
                <template #prefix>
                  <el-icon><Message /></el-icon>
                </template>
              </el-input>
              <el-button
                :disabled="countdown > 0"
                @click="getVerifyCode"
                class="verify-code-btn"
              >
                {{ countdown > 0 ? `${countdown}s` : '获取验证码' }}
              </el-button>
            </div>

            <!-- 新密码输入 -->
            <el-input
              v-model="newPassword"
              type="password"
              placeholder="请设置新密码"
              :disabled="countdown > 0"
            >
              <template #prefix>
                <el-icon><Lock /></el-icon>
              </template>
            </el-input>

            <!-- 确认密码输入 -->
            <el-input
              v-model="confirmPassword"
              type="password"
              placeholder="请确认新密码"
              :disabled="countdown > 0"
            >
              <template #prefix>
                <el-icon><Lock /></el-icon>
              </template>
            </el-input>

            <!-- 提交按钮 -->
            <el-button
              type="primary"
              class="register-btn"
              @click="resetPassword"
              :disabled="!isFormValid || countdown > 0"
            >
              重置密码
            </el-button>
            
            <!-- 返回登录按钮 -->
            <el-button 
              type="text" 
              class="back-to-login" 
              @click="backToLogin"
            >
              <el-icon><ArrowLeft /></el-icon>
              返回登录
            </el-button>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { Message, Lock, ArrowLeft } from '@element-plus/icons-vue'
import axios from 'axios'
import { ElMessageBox, ElMessage } from 'element-plus'
export default {
  components: { Message, Lock, ArrowLeft },
  data() {
    return {
      email: '',
      verifyCode: '',
      newPassword: '',
      confirmPassword: '',
      countdown: 0,
      timer: null
    }
  },
  computed: {
    isFormValid() {
      return (
        this.email &&
        this.verifyCode &&
        this.newPassword &&
        this.confirmPassword &&
        this.newPassword === this.confirmPassword
      )
    }
  },
  beforeUnmount() {
    if (this.timer) clearInterval(this.timer)
  },
  methods: {
    async getVerifyCode() {
      if (!this.email) {
        this.$message.warning('请输入邮箱')
        return
      }

      try {
        const response = await axios.post(
          'http://localhost:5000/api/auth/forgot-password/send-code',
          { email: this.email }
        )
        this.$message.success(response.data.message)
        this.countdown = 60
        this.timer = setInterval(() => this.countdown--, 1000)
      } catch (error) {
        this.$message.error(error.response?.data?.message || '发送失败')
      }
    },

    async resetPassword() {
      if (!this.isFormValid) {
        this.$message.warning('请检查表单填写')
        return
      }

      try {
        const response = await axios.post(
          'http://localhost:5000/api/auth/reset-password',
          {
            email: this.email,
            verifyCode: this.verifyCode,
            newPassword: this.newPassword
          }
        )

        // 使用响应数据中的消息
        ElMessageBox.confirm(
          response.data.message || '密码重置成功！是否前往登录页？',
          '操作确认',
          {
            confirmButtonText: '前往登录',
            cancelButtonText: '继续操作',
            type: 'success'
          }
        )
        .then(() => {
          // 用户点击“前往登录”
          this.$router.push('/LoginView')
        })
        .catch(() => {
          // 用户点击“继续操作”
          ElMessage.info('请继续其他操作')
          // 清空表单示例
          this.email = ''
          this.verifyCode = ''
          this.newPassword = ''
          this.confirmPassword = ''
        })

      } catch (error) {
        this.$message.error(error.response?.data?.message || '重置失败')
      }
    },
    
    backToLogin() {
      this.$router.push('/LoginView')
    }
  }
}
</script>
<style scoped>
.zhengti3
{
  background-image: url('../assets/天空2.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  width: calc(100% - 200px);
  height:100%;
}
.register-card
{
  background-image: url('../assets/sky.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  width: calc(100% - 200px);
  height:100%;
}
.back-to-login {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white !important; /* 修改按钮文本颜色为白色 */
}
.back-to-login:hover {
  text-decoration: underline;
}
</style>
    